<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
    <script>
    const app = {
        type:"div",
        props:{
            className:"box",
            children:[
            {
                type:"p",
                props:{
                className:"p_1",
                children:["hi,my is p"]
                }
            },
            {
                type:"span",
                props:{
                className:"span_1",
                children:["hi,my is span"]
            }
                    }
                ]
            }
        }
const render = (app,root) =>{
const creatElement = (app,root) =>{
    let cur = null
    if (typeof app === "string") {
        cur = window.document.createTextNode(app)
        }else{
        console.log(app);
        let {type,props} = app
        cur = window.document.createElement(type)
        console.log(Object.keys(props));
        Object.keys(props).map(item=>{
        switch (item) {
            case "className":
                cur.setAttribute('class',props[item])
                break;
                        
            case "children":
                if (Array.isArray(props.children)) {
                    props.children.map(val=>{
                        creatElement(val,cur)
                    })
                    }
                    break;
                }
            })
        }
        root.append(cur)
        }
        creatElement(app,root)
    }        
render(app,window.document.querySelector("#root"))
    let obj = {
        name:"张三",
        age:18
    }
    obj.name
    obj.age
    </script>
</body>
</html>